<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .head{
            width: 100%;
            line-height: 50px;
            background-color: #e3e4e5;
        }
        .left{
            height: calc(100vh - 50px);
            background-color: aquamarine;
            width: 200px;
            position: fixed;
            left: 0;
            bottom: 0;
        }
        .right{
            width: calc(100vw - 200px);
            height: calc(100vh - 50px);
            position: fixed;
            right: 0;
            bottom: 0;
            background-color: #555;
        }
    </style>
</head>
<body>
<div id="app">
    <fld-header></fld-header>
    <fld-left></fld-left>
    <fld-right></fld-right>
</div>

.vue
<template id="header">
    <div class="head">
        <h1>header</h1>
    </div>
</template>
<template id="fld-left">
    <div class="left">
        <h1>fld-left</h1>
    </div>
</template>
<template id="fld-right">
    <div class="right">
        <h1>fld-right</h1>
    </div>
</template>
<script>
//<!--    注册全局-->
    Vue.component('fld-header',{
        template:'#header'
    })
    Vue.component('fld-left',{
        template:'#fld-left'
    })
    Vue.component('fld-right',{
        template:'#fld-right'
    })

    // Vue.component('list',{
    //     template:'<h1>body</h1>'
    // })
    const vm = new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{

        }
    })
</script>
</body>
</html>